<!--首页-->
<template>
    <div>
        <!--中间的盒子-->
        <div id="middle">
            <!--轮播图-->
            <div style="height: 520px">
                <el-carousel indicator-position="outside" style="height: 510px;">
                    <el-carousel-item v-for="(i,index) in imgList" :key="index" style="height: 498px">
                            <!--图片跳转详情页-->
                            <router-link :to="{path: '/workinfo', query: {id:i.id,category:i.category}}"><img
                                :src="require('../img/'+i.link)" style="width: 1200px;height: 420px"></router-link>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <!--热门推荐-->
            <div class="divTestStyle" style="width:1300px;height: 400px;margin-left: 300px;">
                <h2 class="rm">热门推荐</h2>
                <div class="block" v-for="(i,index) in hotList" :key="index" style="margin-left: 20px;">
                    <div style="float:left;padding-left: 10px">
                        <router-link :to="{path: '/workinfo', query: {id:i.id,category:i.category}}">
                            <el-image :src="require('../img/'+i.pic)" style="width: 120px;height: 150px;"/>
                        </router-link>
                    </div>
                    <div style="float:left;">
                        <div style="height: 30px"><span class="demonstration" v-text="i.title">默认</span></div>
                        <div style="height: 100px;width: 190px;"><span class="demonstration"
                                                                       v-text="i.content">默认</span></div>
                        <div style="height: 30px;color: red"><span class="demonstration" v-text="i.author">默认</span>
                        </div>
                    </div>
                </div>
            </div>
            <!--新书推荐-->
            <div id="xs" class="divTestStyle" style="width: 1300px;height: 650px;margin-left: 300px">
                <h2 class="rm">新书推荐</h2>
                <div class="block" v-for="(i,index) in newList" :key="index" style="margin-left: 20px;">
                    <div style="float:left;padding-left: 10px">
                        <router-link :to="{path: '/workinfo', query: {id:i.id,category:i.category}}">
                            <el-image :src="require('../img/'+i.pic)" style="width: 120px;height: 150px;"/>
                        </router-link>
                    </div>
                    <div style="float:left;">
                        <div style="height: 30px"><span class="demonstration" v-text="i.title">默认</span></div>
                        <div style="height: 100px;width: 190px;"><span class="demonstration"
                                                                       v-text="i.content">默认</span></div>
                        <div style="height: 30px;color: red"><span class="demonstration" v-text="i.author">默认</span>
                        </div>
                    </div>
                </div>
            </div>
            <div id="wb" class="divTestStyle" style="width: 1300px;height: 400px;margin-left: 300px">
                <h2 class="rm">人气完本</h2>
                <div class="block" v-for="(i,index) in completeList" :key="index" style="margin-left: 20px;">
                    <div style="float:left;padding-left: 10px">
                        <router-link :to="{path: '/workinfo', query: {id:i.id,category:i.category}}">
                            <el-image :src="require('../img/'+i.pic)" style="width: 120px;height: 150px;"/>
                        </router-link>
                    </div>
                    <div style="float:left;">
                        <div style="height: 30px"><span class="demonstration" v-text="i.title">默认</span></div>
                        <div style="height: 100px;width: 190px;"><span class="demonstration" v-text="i.content"></span></div>
                        <div style="height: 30px;color: red"><span class="demonstration" v-text="i.author">默认</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    ! function (e, t, a) {
        function n() {
            c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
                o(), r()
        }

        function r() {
            for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[
                e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x +
                "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e]
                    .scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
            requestAnimationFrame(r)
        }

        function o() {
            var t = "function" == typeof e.onclick && e.onclick;
            e.onclick = function (e) {
                t && t(), i(e)
            }
        }

        function i(e) {
            var a = t.createElement("div");
            a.className = "heart", d.push({
                el: a,
                x: e.clientX - 5,
                y: e.clientY - 5,
                scale: 1,
                alpha: 1,
                color: s()
            }), t.body.appendChild(a)
        }

        function c(e) {
            var a = t.createElement("style");
            a.type = "text/css";
            try {
                a.appendChild(t.createTextNode(e))
            } catch (t) {
                a.styleSheet.cssText = e
            }
            t.getElementsByTagName("head")[0].appendChild(a)
        }

        function s() {
            return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math
                .random()) + ")"
        }
        var d = [];
        e.requestAnimationFrame = function () {
            return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e
                .oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
                setTimeout(e, 1e3 / 60)
            }
        }(), n()
    }(window, document);
    export default {
        name: 'Index',
        data() {
            return {
                activeIndex2: '1',
                bookList: {},
                hotList: {},
                newList: {},
                completeList: {},
                input: '',
                // username:localStorage.getItem("username"),
                imgList: {},
                dialogFormVisible: '',
                form: {
                    username: '',
                    password: ''

                },

                formLabelWidth: '120px'

            }
        },
        props: ['show'],
        created() {
            this.$http.post('/nove/list').then(response => {
                this.bookList = response.data
            })
            this.$http.post('/nove/hotList').then(response => {
                this.hotList = response.data
            })
            this.$http.post('/nove/newList').then(response => {
                this.newList = response.data
            })
            this.$http.post('/nove/completeList').then(response => {
                this.completeList = response.data
            })
            this.$http.post('/nove/carousel').then(response => {
                this.imgList = response.data
            })
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath)
            },
            showMsg(val) {
                this.dialogFormVisible = val
            },
            info(id) {
                this.$router.replace('/workinfo')
            }
        }
    }
</script>

<style>
    /*轮播图*/
    .el-carousel {
        margin-left: 15%;
        width: 1300px;
        height: 510px;
    }

    #middle {
        background-color: honeydew;
    }

    .divTestStyle {
        border: 1px;
        background-color: white;
    }

    .rm {
        margin-left: -1100px;
    }
</style>

<style scoped>

</style>
